<!-- 登录页 -->
<template>
<!-- 根 -->
  <div class="login_container">

    <!-- 添加 “通用后台管理系统” -->
    <div class="title">酒店客房管理系统</div>

    <!-- 登录盒子  -->
    <div class="login_box">

      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/img/login/logo.png" alt="" />
      </div>


      <!-- 登录表单 ，element-ui布局  v-model绑定变量 -->
      <el-form
        :model="loginForm"
        ref="LoginFormRef"
        :rules="loginFormRules"
        label-width="0px"
        class="login_form"
      >
        <!-- 用户名 -->
        <!-- 字体图标，带 icon 的输入框 可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标-->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            prefix-icon="el-icon-key"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>

        <!-- 验证码 -->
        <el-row>
          <el-col :span="16">
            <el-form-item prop="captcha_code">
              <el-input
                v-model="loginForm.captcha_code"
                placeholder="验证码"
                prefix-icon="el-icon-picture"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="captcha_code">
              <img src="../assets/img/login/yzm.jpg" ref="code" />
            </div>
          </el-col>
        </el-row>

        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>



    <div class="foot" style="font-size:20px">@铃兰高中</div>
  </div>
</template>

<script>
import {login, test} from '../api/login';
import {Message} from "element-ui";

export default {
  data() {

    // 函数返回对象
    return {
      // loginForm 绑定form表单，loginForm里的属性绑定form表单的元素
      // :model="loginForm"    v-model="loginForm.xx"
      loginForm: {
        username: "",
        password: "",
      },
      // 表单验证规则
      // Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
      // https://element-plus.gitee.io/#/zh-CN/component/form
      loginFormRules: {
        username: [
          {
            required: true,
            message: "请输入登录名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "登录名长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    // 登录  TODO
    login() {
      // test().then(res => {
      //   console.log(res)
      //   if (res.status === 401){
      //     Message({
      //       message: res.msg + ',请先登录',
      //       type: 'warning',
      //       duration: 5 * 1000
      //     });
      //     // this.router.push('/login');
      //     return res;
      //   }
      // });

      login(this
      .loginForm).then(res => {
        if (res.status == 200){
          sessionStorage.setItem('Authorization',res.data.token);
          this.$notify({
            title: '成功',
            message: '成功登录！',
            type: 'success'
          });
          this.$router.push("/welcome")
        }else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          });
        }
      })
    },
    


    // 表单重置方法
    resetLoginForm() {
      // 怎么获取对象！！！！！！  this.$refs.名称 对象
      this.$refs.LoginFormRef.resetFields();
    },
  },
};
</script>

<!--scoped:css样式本页可用 ,使用less写样式 ,基于css，多点料，编译成css  
transform: translate(-50%, -50%); 垂直居中
-->
<style scoped>
.login_container {
    background-image: url("../assets/img/login/login_bg1.jpg") ;
  /* background-color: #2b5b6b; */
  box-sizing: border-box;
  background-attachment: inherit;
  height: 100%;
  width: 100%;
  background-size:cover;

}

.title {
  font-size: 60px;
  color: white;
  font-weight: bold;
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.login_box {
  width: 500px;
  height: 400px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translate(-50%, -50%);   
}
.login_box .avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); 
  background-color: #fff;
}
.login_box .avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(238, 225, 225);
}
.login_form {
  position: absolute;
  bottom: 15px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}


.btns {
  display: flex;
  justify-content: flex-end;
}

.captcha_code {
  height: 100%;
}

.captcha_code img {
  width: 100%;
  height: 100%;
}
.foot {
  font-size: 15px;
  color: white;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
